<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue嵌套路由</title>
</head>
<body>
<div id="app">
    <!--路由链接-->
    <router-link to="/products">商铺管理</router-link>
    <!--显示路由-->
    <router-view></router-view>
</div>
</body>
</html>
<template id="productTemplate">
    <div>
        <h3>商品管理</h3>
        <a href="#/products/add">添加商品信息</a>
        <table border="1">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>生产日期</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>超短裙</td>
                <td>24.24</td>
                <td>2021.02.03</td>
                <td><a href="">删除</a><a href="" @click.prevent="editRows({id:1,name:'xiaoming'})">修改</a></td>
            </tr>
        </table>
        <!--router-view 用来展示子组件路由-->
        <router-view></router-view>
    </div>

</template>
<script src="../vue.js"></script>
<script src="../vue-router.js"></script>
<script src="../axios.min.js"></script>
<script>
    //创建组件配置对象
    const product = {
        template: "#productTemplate",
        data() {
            return {};
        },
        methods: {
            editRows(user) {
                console.log(user);
                this.$router.push({path: '/products/edit', query: user}); //切换路径 通过query(?)方式传递数据
            }
        }
    }

    const add = {
        template: `<div><form action="">
                    商品名称：<input type="text"><br>
                    商品价格：<input type="text"><br>
                    <input type="submit" value="保存商品">
                        </form></div>`
    }

    const edit = {
        template: `
            <div>
                <form action="">
                    商品名称：<input type="text" v-model="user.name"><br>
                    商品价格：<input type="text" v-model="user.id"><br>
                    <input type="submit" value="保存商品">
                </form>
            </div>`,
        data() {
            return {
                user:{}
            };
        },
        methods: {},
        created() {
            console.log("edit====>", this.$route.query);
            this.user = this.$route.query;
        }
    }

    //创建路由对象
    const router = new VueRouter({
        routes: [
            {path: '/', redirect: '/products'},
            {
                path: '/products',
                name: 'products',
                component: product,
                children: [ //定义子路由 注意子路由的path属性不能使用 "/"开头
                    {path: "add", component: add},
                    {path: "edit", component: edit},
                ]
            },
            //{path: '/add', component: add}
        ]
    });

    const app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router,
    })
</script>